<template>
	<view>
		<view class="itemCard" v-for="(item,index) in categories">

			<view class="titleView1" style="">
				<view style="flex:1;">{{item.name}}</view>
				<view @click="clickInsert($event,index)" class="btn">添加二类疾病</view>
				<image src="../../static/icon.png" style="height: 50rpx;width: 50rpx;" @click="clickItem($event,index)">
				</image>
			</view>

			<template v-if="!item.fold">
				<view v-for="(subItem,subIndex) in item.children">

					<view class="titleView2">
						<view style="flex:1;">{{subItem.name}}</view>
						<view @click="clickInsert($event,index,subIndex)" class="btn">添加三类疾病</view>
					</view>

					<view v-for="(subItem1,subIndex1) in subItem.children">
						<view class="titleView3">
							{{subItem1.name}}
						</view>
						<view style="margin-left: 100rpx;margin-right: 10rpx;height: 1rpx;background: #e9e8e7;"></view>
					</view>
					<view style="margin-left: 60rpx;margin-right: 10rpx;height: 1rpx;background: #e9e8e7;"></view>
				</view>
			</template>
			<view style="margin-left: 10rpx;margin-right: 10rpx;height: 1rpx;background: #e9e8e7;"></view>
		</view>

		<view @click="clickInsert1" class="bottomBtn">
			添加疾病
		</view>
	</view>
</template>

<script>
	// 在script顶部添加组件引用
	export default {
		data() {
			return {
				categories: [],
				array: []
			};
		},
		onLoad() {

			for (let i = 0; i < 3; i++) {
				this.categories.push({
					id: i + 1,
					name: '一级分类' + (i + 1),
					fold: true,
					children: [{
						id: (i + 1) * i * 10 + (i + 1),
						name: '二级分类1',
						children: [{
							id: (i + 1) * i * 100 + (i + 1),
							name: '三级分类1'
						}, {
							id: (i + 1) * i * 100 + (i + 1),
							name: '三级分类1'
						}]
					}, {
						id: (i + 1) * i * 10 + (i + 1),
						name: '二级分类1',
						children: [{
							id: (i + 1) * i * 100 + (i + 1),
							name: '三级分类1'
						}, {
							id: (i + 1) * i * 100 + (i + 1),
							name: '三级分类1'
						}]
					}, {
						id: (i + 1) * i * 10 + (i + 1),
						name: '二级分类1',
						children: [{
							id: (i + 1) * i * 100 + (i + 1),
							name: '三级分类1'
						}, {
							id: (i + 1) * i * 100 + (i + 1),
							name: '三级分类1'
						}]
					}]
				})
			}
		},
		methods: {

			clickItem(e, index) {
				let that = this;
				let temp = JSON.parse(JSON.stringify(that.categories[index]))
				temp.fold = !temp.fold;
				that.$set(that.categories, index, temp);
			},

			clickInsert1() {
				let that = this;
				// let temp = JSON.parse(JSON.stringify(this.categories))
				uni.showModal({
					title: "输入名称",
					editable: true,
					success(res) {
						if (res.confirm) {
							that.categories.push({
								id: new Date().getTime(),
								name: res.content,
								children: [],
								fold: true
							})
							// console.log(res)
							// if (subIndex == undefined) {
							// 	temp.children.push({
							// 		name: res.content,
							// 		id: new Date().getTime(),
							// 		children: []
							// 	});
							// } else {
							// 	temp.children[subIndex].children.push({
							// 		name: res.content,
							// 		id: new Date().getTime()
							// 	})
							// }
							// that.$set(that.categories, index, temp);
						}
					}
				})
			},

			clickInsert(e, index, subIndex) {
				let that = this;
				let temp = JSON.parse(JSON.stringify(this.categories[index]))
				uni.showModal({
					title: "输入名称",
					editable: true,
					success(res) {
						if (res.confirm) {
							console.log(res)
							if (subIndex == undefined) {
								temp.children.push({
									name: res.content,
									id: new Date().getTime(),
									children: []
								});
							} else {
								temp.children[subIndex].children.push({
									name: res.content,
									id: new Date().getTime()
								})
							}
							that.$set(that.categories, index, temp);
						}
					}
				})
			}
		}
	};
</script>



<style lang="scss" scoped>
	.bottomBtn {
		position: fixed;
		color: #ffffff;
		bottom: 50rpx;
		left: 100rpx;
		right: 100rpx;
		background-color: #248cfa;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.itemCard {
		.titleView1 {
			background: #f8f9fa;
			color: #2c3e50;
			border-left: 4rpx solid #007bff; // 左侧装饰线
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
			margin: 0rpx 0;
			padding: 0rpx 30rpx;
			height: 70rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			position: sticky;
			top: 0rpx;
			z-index: 999;
		}

		.titleView2 {
			color: #34495e;
			padding: 0rpx 30rpx 0rpx 60rpx; // 增加左侧缩进
			border-left: 2rpx solid #e0e0e0;
			font-size: 30rpx;
			margin: 12rpx 0;
			display: flex;
			height: 70rpx;
			align-items: center;

			&::before {
				content: "·";
				font-size: 50px;
				margin-right: 16rpx;
				color: #007bff;
			}
		}

		.titleView3 {
			color: #7f8c8d;
			padding: 0rpx 30rpx 0rpx 90rpx; // 进一步增加缩进
			font-size: 28rpx;
			margin: 8rpx 0;
			border-left: 2rpx solid #f0f0f0;
			height: 60rpx;
			display: flex;
			align-items: center;
		}

		.btn {
			background: #248cfa;
			padding: 6rpx 30rpx;
			border-radius: 40rpx;
			font-size: 24rpx;
			color: #ffffff;
		}

		// 统一添加按钮样式
		// [class^="titleView"]>view:last-child {
		// 	background: #248cfa;
		// 	padding: 6rpx 30rpx;
		// 	border-radius: 40rpx;
		// 	font-size: 24rpx;
		// 	color: #ffffff;

		// 	&:active {
		// 		background: #e1f0ff;
		// 	}
		// }
	}
</style>